<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>采购数据汇总仪表盘</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

    <!-- 配置Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3b82f6',
                        secondary: '#10b981',
                        accent: '#f59e0b',
                        neutral: '#64748b',
                        success: '#10b981',
                        warning: '#f59e0b',
                        danger: '#ef4444',
                        info: '#3b82f6'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .chart-container {
                transition: all 0.3s ease;
            }
            .chart-container:hover {
                transform: translateY(-5px);
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
<!-- 顶部导航 -->
<header class="bg-white shadow-md fixed w-full top-0 z-50 transition-all duration-300" id="navbar">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-line-chart text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-gray-800">采购数据汇总仪表盘</h1>
        </div>
        <div class="flex items-center space-x-4">
            <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md transition-all duration-300 flex items-center" id="refresh-button">
                <i class="fa fa-refresh mr-2"></i>
                <span>刷新数据</span>
            </button>
        </div>
    </div>
</header>

<!-- 主要内容区 -->
<main class="container mx-auto px-4 pt-24 pb-12">
    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-xl p-6 card-shadow chart-container">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-neutral text-sm font-medium">总采购金额</p>
                    <h3 class="text-3xl font-bold text-gray-800 mt-1" id="total-amount">¥0.00</h3>
                    <p class="text-success text-sm mt-2 flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i>
                        <span>12.5% 较上月</span>
                    </p>
                </div>
                <div class="bg-primary/10 p-3 rounded-lg">
                    <i class="fa fa-money text-primary text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl p-6 card-shadow chart-container">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-neutral text-sm font-medium">采购订单数</p>
                    <h3 class="text-3xl font-bold text-gray-800 mt-1" id="order-count">0</h3>
                    <p class="text-success text-sm mt-2 flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i>
                        <span>8.3% 较上月</span>
                    </p>
                </div>
                <div class="bg-secondary/10 p-3 rounded-lg">
                    <i class="fa fa-file-text text-secondary text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl p-6 card-shadow chart-container">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-neutral text-sm font-medium">采购商品数</p>
                    <h3 class="text-3xl font-bold text-gray-800 mt-1" id="goods-count">0</h3>
                    <p class="text-danger text-sm mt-2 flex items-center">
                        <i class="fa fa-arrow-down mr-1"></i>
                        <span>2.1% 较上月</span>
                    </p>
                </div>
                <div class="bg-accent/10 p-3 rounded-lg">
                    <i class="fa fa-cubes text-accent text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl p-6 card-shadow chart-container">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-neutral text-sm font-medium">准时交付率</p>
                    <h3 class="text-3xl font-bold text-gray-800 mt-1" id="delivery-rate">0%</h3>
                    <p class="text-success text-sm mt-2 flex items-center">
                        <i class="fa fa-arrow-up mr-1"></i>
                        <span>5.7% 较上月</span>
                    </p>
                </div>
                <div class="bg-info/10 p-3 rounded-lg">
                    <i class="fa fa-truck text-info text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 柱状图：采购数量按商品分类 -->
        <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-2 chart-container">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold text-gray-800">采购数量按商品分类</h2>
                <div class="flex space-x-2">
                    <button class="text-sm bg-primary/10 text-primary px-3 py-1 rounded-md hover:bg-primary/20 transition-colors" data-period="week">周</button>
                    <button class="text-sm bg-gray-100 text-gray-600 px-3 py-1 rounded-md hover:bg-gray-200 transition-colors" data-period="month">月</button>
                    <button class="text-sm bg-gray-100 text-gray-600 px-3 py-1 rounded-md hover:bg-gray-200 transition-colors" data-period="year">年</button>
                </div>
            </div>
            <div id="barChart" class="w-full h-[400px]"></div>
        </div>

        <!-- 饼状图：采购金额按供应商分布 -->
        <div class="bg-white rounded-xl p-6 card-shadow chart-container">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold text-gray-800">采购金额按供应商分布</h2>
                <button class="text-neutral hover:text-gray-800 transition-colors">
                    <i class="fa fa-ellipsis-v"></i>
                </button>
            </div>
            <div id="pieChart" class="w-full h-[400px]"></div>
        </div>

        <!-- 折线图：采购趋势分析 -->
        <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-3 chart-container">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold text-gray-800">采购趋势分析</h2>
                <div class="flex items-center space-x-4">
                    <div class="flex items-center space-x-2">
                        <span class="w-3 h-3 rounded-full bg-primary"></span>
                        <span class="text-sm text-gray-600">采购金额</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="w-3 h-3 rounded-full bg-secondary"></span>
                        <span class="text-sm text-gray-600">订单数量</span>
                    </div>
                </div>
            </div>
            <div id="lineChart" class="w-full h-[400px]"></div>
        </div>

        <!-- 表格：最近采购订单 -->
        <div class="bg-white rounded-xl p-6 card-shadow lg:col-span-3 chart-container">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold text-gray-800">最近采购订单</h2>
                <button class="text-primary hover:text-primary/80 text-sm font-medium transition-colors">
                    查看全部 <i class="fa fa-angle-right ml-1"></i>
                </button>
            </div>
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单编号</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">供应商</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">商品名称</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数量</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">金额</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200" id="order-table-body">
                    <!-- 表格内容将通过JavaScript动态填充 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-white border-t border-gray-200 py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <p class="text-sm text-gray-500">© 2025 采购管理系统. 保留所有权利.</p>
            </div>
            <div class="flex space-x-6">
                <a href="#" class="text-gray-400 hover:text-gray-500 transition-colors">
                    <i class="fa fa-question-circle"></i>
                    <span class="ml-1">帮助中心</span>
                </a>
                <a href="#" class="text-gray-400 hover:text-gray-500 transition-colors">
                    <i class="fa fa-file-text-o"></i>
                    <span class="ml-1">文档</span>
                </a>
                <a href="#" class="text-gray-400 hover:text-gray-500 transition-colors">
                    <i class="fa fa-cog"></i>
                    <span class="ml-1">设置</span>
                </a>
            </div>
        </div>
    </div>
</footer>

<!-- 加载中遮罩层 -->
<div id="loading-overlay" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white p-6 rounded-lg shadow-lg flex items-center">
        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mr-4"></div>
        <div>
            <h3 class="text-lg font-semibold text-gray-800">正在加载数据</h3>
            <p class="text-gray-500">请稍候...</p>
        </div>
    </div>
</div>

<!-- 错误提示模态框 -->
<div id="error-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 overflow-hidden">
        <div class="bg-danger text-white px-6 py-4">
            <h3 class="text-lg font-semibold">加载失败</h3>
        </div>
        <div class="p-6">
            <p class="text-gray-700 mb-4" id="error-message">数据加载失败，请重试。</p>
            <div class="flex justify-end">
                <button id="retry-button" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-md transition-all duration-300">
                    重试
                </button>
            </div>
        </div>
    </div>
</div>

<script>
    // 假数据模型 - 可直接在控制层访问
    const fakeData = {
        // 统计卡片数据
        stats: {
            totalAmount: 128540.50,
            orderCount: 245,
            goodsCount: 58,
            deliveryRate: 92.5
        },

        // 柱状图数据（商品分类采购数量）
        barChart: {
            categories: ['电子产品', '办公用品', '原材料', '包装材料', '机械设备', '其他'],
            values: [350, 280, 420, 190, 150, 80]
        },

        // 饼状图数据（供应商采购金额分布）
        pieChart: {
            suppliers: ['供应商A', '供应商B', '供应商C', '供应商D', '供应商E'],
            amounts: [32000, 28500, 24000, 20500, 23540.50],
            colors: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#64748b']
        },

        // 折线图数据（采购趋势）
        lineChart: {
            months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            amounts: [85000, 92000, 98000, 105000, 112000, 118000, 125000, 128000, 132000, 135000, 138000, 142000],
            orders: [180, 195, 205, 215, 225, 230, 235, 240, 245, 250, 255, 260]
        },

        // 订单表格数据
        orders: [
            {
                id: 'PO-20250626-